<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        //块作用域
        if(true)
        {
            var c=3;
        }
        //此时能查找到变量c和c的值，所以代表没有块作用域
        console.log(c);

        var a=10;
        var b=20;
        function fn(x)
        {
            
            var a=100;
            var c=300;
            console.log("fn()",a,b,c,x);
            function bar(x)
            {
                var a=1000;
                var d=400;
                console.log("bar()",a,b,c,d,x);
            }
            bar(100);
            bar(200);
        }
        //传递参数x=50，但是不影响fn(x)函数内的bar(x)函数的结果。即使是取消bar的两次传递参数，也不会被外部传递的x参数影响。
        fn(10);
    </script>
</head>
<body>
    <!--
        1.区别一
        全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了，而不是再调用函数时
        全局执行上下文环境是在全局作用域确定之后，JS代码马上执行之前创建
        函数执行上下文环境是在调用函数时，函数体代码执行之前创建
        2.区别二
        作用域是静态的，只要函数定义好了就一直存在，且不会再变化
        上下文环境是动态的，调用函数时创建，函数调用结束时上下文环境就会被释放
        3.联系
        上下文环境（对象）时从属于所在的作用域
        全局上下文环境==》全局作用域
        函数上下文环境==》对应的函数使用域
    -->
    <img src="../../IMG/03-02.作用域与执行上下文.png">
    <br>
    <img src="../../IMG/03-02.作用域与执行上下文2.png">
</body>
</html>